<template>
    <div>
      <div
        class="music"
        :class="{ actived: currentIndex == index }"
        @click="musicPlay(index)"
        v-for="(item, index) in blockList"
        :key="item.blockId"
      >
        <div class="block">
          <div class="my_block">
            <div class="block_left">
              <div class="title">
                <div class="song_title">
                  {{ item.name }}
                </div>
                <div class="song_subtitle">
                  {{ (item.song?.alias || item?.alia)[0] }}
                </div>
              </div>
              <div class="singer">
                <img
                  src=""
                />
                <div class="singer_name">
                  {{ item.song?.artists[0].name || item?.ar[0].name }} -
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div class="block_right">
              <img
                src=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
    
  <script setup>
  import { ref } from "vue";
  import { showToast } from "vant";
  import { useMainStore } from "@/pinia/store.ts";
  import router from "@/router/routes";
  import { useRoute } from "vue-router";
  
  const currentIndex = ref(0);
  const mainStore = useMainStore();
  const route = useRoute();
  const active = ref(0);
  const value = ref("");
  
  const props = defineProps({
    blockList: Array,
  });
  
  
  
  
  const musicPlay = (index) => {
    console.log();
    router.push("/musicPlay");
  };
  
  </script>
    
  <style lang="scss" scoped>
  .music {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    > .block {
      display: block;
      width: 100%;
      height: 56px;
      > .my_block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        > .block_left {
          display: block;
          overflow: hidden;
          line-height: 1.5;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          > .title {
            display: flex;
            overflow:hidden;
            align-items: center;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            margin-right: 5px;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            > .song_title {
              display: flex;
              overflow:hidden;
              align-items: center;
              height: 20px;
              font-size: 16px;
              font-weight: 400;
              margin-right: 5px;
              margin-bottom: 2px;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
            > .song_subtitle {
              display: flex;
              overflow: hidden;
              align-items: center;
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              margin-left: 5px;
              margin-top: 2px;
              color: #888;
              line-height: 1.5;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
          }
          > .singer {
            display: flex;
            align-items: center;
            > img {
              width: 12px;
              height: 8px;
              margin-right: 2px;
            }
            > .singer_name {
              color: #888;
              font-size: 12px;
              white-space: nowrap; /* 禁止换行 */
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 使用省略号表示超出部分 */
              text-align: left; /* 文本对齐方式 */
            }
          }
        }
        > .block_right {
          padding-right: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
  }
  </style>